<template>
  <FullCalendar :options="calendarOptions" class="eventDeal-wrap"/>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
export default {
  name: 'DEMO',
  components: {
    FullCalendar
  },
  data () {
    return {
      // 用于标记是否要显示标记
      showMarker: false,
      // 保存选定日期的引用
      selectedDateCell: null,
      calendarOptions: {
        // 引入的插件
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        eventContent (info) {
          const marker = document.createElement('div')
          marker.classList.add('event-marker')
          return { domNodes: [marker] }
        },
        // 日历头部按钮位置
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth, timeGridWeek, timeGridDay'
        },
        // 日历头部按钮中文转换
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '天'
        },
        initialView: 'dayGridMonth', // 指定默认显示视图
        locale: 'zh-ch', // 切换语言，当前为中文
        firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
        weekNumberCalculation: 'ISO', // 与firstDay配套使用
        eventCOlor: '#3d8eec', // 全部日历日程背景色
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        aspectRatio: '1.5', // 设置日历单元格宽高比
        displayEventTime: false, // 是否显示事件时间
        allDaySlot: false, // 周、日视图时，all-day不显示
        eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
        eventTimeFormat: {
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时制
        },
        events: [], // 日程数组
        // 事件
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        weekends: true,
        navLinks: true, // 天链接
        selectHelper: false,
        selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
        dayMaxEvents: true,
        dateClick: this.handleDateClick, // 日期点击
        eventsSet: this.handleEvents, // 事件点击
        eventClick: this.handleEventClick, // 日程点击信息展示
        eventDrop: this.handleEventDrop, // 日程拖动事件
        eventResize: this.eventResize // 日程缩放事件
      }
    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    // 处理添加或更新事件的方法
    handleEventSaveOrUpdate (action, eventData) {
      if (action === 'add') {
        this.$refs.eventDialogue.showAddDialog()
      } else if (action === 'view' && eventData) {
        this.$refs.eventDialogue.showEventDetails(eventData)
      }
    },

    // 添加或更新事件的方法
    saveOrUpdateEvent (eventData) {
      const eventsArr = this.calendarOptions.events
      const existingEventIndex = eventsArr.findIndex(
        (item) => item.eventID === eventData.eventID
      )

      if (existingEventIndex !== -1) {
        // 更新现有事件
        this.$set(eventsArr, existingEventIndex, eventData)
      } else {
        // 添加新事件
        eventsArr.push(eventData)
      }
    },

    // 删除事件的方法
    deleteEvent (eventID) {
      const eventsArr = this.calendarOptions.events
      const eventIndex = eventsArr.findIndex((item) => item.eventID === eventID)

      if (eventIndex !== -1) {
        eventsArr.splice(eventIndex, 1)
      }
    },
    // 处理事件被点击时的方法
    handleEventClick (info) {
      this.handleEventSaveOrUpdate('view', info.event)
      // 如果需要，可以添加更多功能
    },
    eventContent (info) {
      // 在这里可以根据事件信息自定义内容
      const marker = document.createElement('div')
      marker.classList.add('event-marker') // 添加一个 CSS 类来定义标记样式
      return {domNodes: [marker]}
    },
    // 处理日期被点击时的方法
    handleDateClick (selectInfo) {
      const confirmation = confirm(`您是否要在 ${selectInfo.dateStr} 添加一个事件？`)
      if (confirmation) {
        // 在确认之后设置要显示标记的状态为 true
        this.showMarker = true
        // 保存选定的日期单元格引用
        this.selectedDateCell = selectInfo.dayEl
      }
    },
    openDialog (action, eventData = null) {
      // 在这里你可以打开一个对话框或模态框，并在其中显示一个表单来添加或修改事件
      // action 参数可以是 'add' 或 'view'，用于确定是添加还是查看事件
      // eventData 包含传递给对话框的事件数据（如果是查看事件的话）

      // 这里是一个简化的例子，你需要根据自己的组件和UI库来实现
      if (action === 'add') {
        // 打开一个用于添加事件的对话框
        // 可以在此设置对话框的状态和清空表单
        this.$refs.eventDialogue.showAddDialog()
      } else if (action === 'view' && eventData) {
        // 打开一个用于查看事件的对话框，并显示事件数据
        this.$refs.eventDialogue.showEventDetails(eventData)
      }
    },
    // 日程保存
    saveEvent (val) {
      let eventsArr = this.calendarOptions.events
      try {
        if (eventsArr.length === 0) {
          eventsArr.push(val)
        } else {
          eventsArr.forEach((item, index, eventsArr) => {
            // 若为修改日程
            if (item.eventID === val.eventID) {
              throw new Error(index)
            }
          })
          // 若为新增日程
          eventsArr.push(val)
        }
      } catch (e) {
        // 若为修改日程
        eventsArr.splice(e.message, 1, val)
      }
    },
    // 日程事件点击
    handleEvents (info) {
      console.log('handleEvents.info:', info)
      // this.currentEvents = events
    },
    handleWeekendsToggle () {
      console.log('handleWeekendsToggle')
      this.calendarOptions.weekends = !this.calendarOptions.weekends
    },
    // 日程事件触发
    eventClick (info) {
      console.log('eventClick.info:', info)
      info.el.style.borderColor = 'red'
    },
    // 日程拖动事件
    handleEventDrop (info) {
      this.$refs['eventDialogue'].eventFormModel.start = info.event.start
      this.$refs['eventDialogue'].eventFormModel.end = info.event.end
    },
    // 日程缩放事件
    eventResize (info) {
      this.$refs['eventDialogue'].eventFormModel.start = info.event.start
      this.$refs['eventDialogue'].eventFormModel.end = info.event.end
    }
  },
  watch: {
    // 监听 showMarker 属性的变化
    showMarker (newVal) {
      // 当 showMarker 为 true 时，在选定的日期单元格中创建标记
      console.log('New value of showMarker:', newVal)
      console.log('Selected date cell:', this.selectedDateCell)
      if (newVal && this.selectedDateCell) {
        const marker = document.createElement('div')
        marker.classList.add('event-marker')
        this.selectedDateCell.appendChild(marker)
      }
    }
  }

}
</script>
<style>
.event-marker {
  margin-top: -130px;
  position: relative;
  width: 40px; /* 设置标记的宽度 */
  height: 40px; /* 设置标记的高度 */
  border-radius: 50%; /* 将标记设置为圆形 */
  background-color: red; /* 设置标记的背景颜色 */
  top: 50%; /* 使标记垂直居中 */
  left: 50%; /* 使标记水平居中 */
  transform: translate(-50%, -50%); /* 将标记居中 */
}

</style>
